<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>iTrans</title>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css"/>
	<link type="text/css" rel="stylesheet" href="css/itrans.css"/>
	
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
    
    <!-- Our stuff -->
    <script type="text/javascript" src="js/itrans.js"></script>
    <script type="text/javascript" src="js/itrans.validate.js"></script>
    <script type="text/javascript" src="js/itrans.gmap.js"></script>
    
    <!-- Extra plugins -->
	<script type="text/javascript" src="js/jquery.validate.js"></script>	
  </head>
  <body>
  
	<!-- Global popups -->
	<div data-role="popup" id="needLoginPopup" data-overlay-theme="a" data-theme="c" data-dismissable="false" class="ui-corner-all">
		<div data-role="content" data-theme="b" class="ui-content">
			<h3 class="ui-title">You must be logged in to use this feature</h3>
		</div>
	</div>
	
	<div data-role="popup" id="logoutPopup" data-overlay-theme="a" data-theme="c" data-dismissable="false" class="ui-corner-all">
		<div data-role="content" data-theme="b" class="ui-content">
			<h3 class="ui-title">You have successfully logged out!</h3>
		</div>
	</div>

    <!-- Main Route page -->
	<div data-role="page" class="page-map" id="routes" data-add-back-btn="true" data-theme="b">

		<div data-role="header" data-id="nav1">
			<h1>Routes</h1>
			<div class="header"></div>
		</div>

		<div data-role="content">
			<h2>Select a route to view directions</h2>
			<ul id="RouteList" data-inset="true" data-role="listview" data-filter="true" data-filter-theme='d' data-filter-placeholder="enter route name or number (or substring)">
				<li>Loading...</li>
			</ul>
		</div>	
		<div data-role="footer" class="footerDiv" data-id="nav1" data-position="fixed" data-theme='e'>
			<div data-role="navbar">
			<ul>
				<li><a class="ui-btn-active" >Routes </a></li>
				<li><a class="stops"  data-transition="slide">My Stops</a></li>
				<li><a href="#page_map" data-transition="slide">Map</a></li>
				<li><a href="#info" data-transition="slide">Info</a></li>
			</ul>
			</div>
		</div>
    </div>
    
    <!-- My Stops page -->
    <div data-role="page" class="page-map" id="stops" data-add-back-btn="true" data-theme="b">
		<div data-role="header" data-id="nav1">
			<h1>My Stops</h1>
			<div class="header"></div>
		</div>

		<div data-role="content">
			<ul id="myStopList" data-inset="true" data-role="listview" data-filter="true" data-filter-theme='d' data-filter-placeholder="enter stop name (or substring)">
				<li>Loading...</li>
			</ul>
		</div>	
		
		<div data-role="popup" id="deleteStopDialog" data-overlay-theme="a" data-theme="c" class="ui-corner-all">
			<div data-role="content" data-theme="b" class="ui-corner-bottom ui-content">
				<h3 class="ui-title">Are you sure you want to delete this stop?</h3>
				<p>This action cannot be undone.</p>
				<a href="#" id="deletePopupConfirm" class="deleteStop" data-role="button" data-inline="true" data-rel="back" data-theme="c">Yes</a>    
				<a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">No</a>  
			</div>
		</div>	

		<div data-role="footer" class="footerDiv" data-id="nav1" data-position="fixed" data-theme='e'>
			<div data-role="navbar">
			<ul>
				<li><a href="#routes" data-transition="slide">Routes</a></li>
				<li><a class="ui-btn-active">My Stops</a></li>
				<li><a href="#page_map" data-transition="slide">Map</a></li>
				<li><a href="#info" data-transition="slide">Info</a></li>
			</ul>
			</div>
		</div>
    </div>
    
    <!-- Maps page -->
    <div data-role="page" class="page-map" id="page_map" data-add-back-btn="true" data-theme='b'>
		<div data-role="header" data-id="nav1">
			<h1>Maps</h1>
			<div class="header"></div>
		</div>
		
		<div data-role="content">
			<div id="gmap"></div>
		</div>
		
		<div data-role="footer" class="footerDiv" data-id="nav1" data-position="fixed" data-theme='e'>
			<div data-role="navbar">
			<ul>
				<li><a href="#routes" data-transition="slide">Routes</a></li>
				<li><a class="stops"  data-transition="slide">My Stops</a></li>
				<li><a class="ui-btn-active">Map</a></li>
				<li><a href="#info" data-transition="slide">Info</a></li>
			</ul>
			</div>
		</div> 
    </div>
    
    <!-- info page -->
    <div data-role="page" class="page-map" id="info" data-add-back-btn="true" data-theme='b'>
		
		<div data-role="header">
			<h1>Info</h1>
			<div class="header"></div>
		</div>
		
		<div data-role="content">
		
			<!-- feedback -->
			<div>
				<div>
					<strong>Rate Your Ride <small>1: worst, 5: best</small></strong>
					<a href="#" data-role="button" data-mini="true"	data-inline="true">Submit Feedback</a>
				</div>
				<input type="range" name="slider-rateme" id="slider-rateme"	value="3" min="1" max="5" step="1" data-highlight="true" data-mini="true" class="rateme" />
			</div>
			
			 <!-- service alerts -->
			<div>
              <h3>Service Alerts</h3>
                <div id="svc_alerts" style="font-size:.8em"> <!-- service alerts -->
                </div>
            </div>
            
            <div> <!-- promo video -->
				<h3>Behind the Scenes at the TTC</h3>
				<video id="video_with_controls" width="400" controls autobuffer>
					<source src="media/small.mp4" type="video/mp4"/> 
					<source src="media/small.ogv" type='video/ogg; codecs="theora, vorbis"'/> 
					Your browser does not support the video type
				</video>
            </div> <!-- promo -->
            <div>
				<h3>Contact Us</h3>
				33 Davisville Ave <br/>
				Toronto, ON  M1S 2W7 <br/>
				<a href="tel:4163934636" data-role="button" data-mini="true" rel="external">(416) 393-4636</a>
			</div> <!-- contact -->
		</div>
		
		<div data-role="footer" class="footerDiv" data-id="nav1" data-position="fixed" data-theme='e' >
			<div data-role="navbar">
			<ul>
				<li><a href="#routes" data-transition="slide">Routes</a></li>
				<li><a class="stops"  data-transition="slide">My Stops</a></li>
				<li><a href="#page_map" data-transition="slide">Map</a></li>
				<li><a class="ui-btn-active">Info</a></li>
			</ul>
			</div>
		</div> 
    </div>
	
	<!-- Me page -->
    <div data-role="page" class="page-map" id="my_page" data-add-back-btn="true" data-theme="b">
		<div data-role="header" data-id="nav1">
			<h1>My Page</h1>
			<div class="header"></div>
		</div>

		<div data-role="content">
			
		</div>		

		<div data-role="footer" class="footerDiv" data-id="nav1" data-position="fixed" data-theme='e'>
			<div data-role="navbar">
			<ul>
				<li><a href="#routes" data-transition="slide">Routes</a></li>
				<li><a class="stops"  data-transition="slide">My Stops</a></li>
				<li><a href="#page_map" data-transition="slide">Map</a></li>
				<li><a href="#info" data-transition="slide">Info</a></li>
			</ul>
			</div>
		</div>
    </div>
    
    <!-- Login page -->
    <div data-role="page" class="page-map" id="login" data-add-back-btn="true" data-theme="b">
		<div data-role="header" data-id="nav1">
			<h1>Login</h1>
			<div class="header"></div>
		</div>

		<div data-role="content">
			<span id="login_user_input" class="invalid_entry"></span>
			<form id="loginForm" data-ajax="false" method="POST" action="login.jsp">
				Username: <input type="text" name="username" id="login_username" placeholder="Please enter your username"/>
				Password: <input type="password" name="password" id="login_password" placeholder="Please enter your password" />
				<input type="submit" id="loginButton" value="Click to login!"/>
			</form>
			<h3 id="needAccount">Or...don't have an account?</h3>
			<a href="#page_register" data-role="button" data-transition="slide">Register here!</a>
		</div>
		
		<div data-role="popup" id="loginFailPopup" data-overlay-theme="a" data-theme="c" class="ui-corner-all">
			<div data-role="content" data-theme="b" class="ui-content">
				<h3 class="ui-title">Your username or password is incorrect.</h3>
			</div>
		</div>
		
		<div data-role="popup" id="loginSuccessPopup" data-overlay-theme="a" data-theme="c" class="ui-corner-all">
			<div data-role="content" data-theme="b" class="ui-content">
				<h3 class="ui-title">You have successfully logged in!</h3>
			</div>
		</div>
		
		<div data-role="footer" class="footerDiv" data-id="nav1" data-position="fixed" data-theme='e'>
			<div data-role="navbar">
			<ul>
				<li><a href="#routes" data-transition="slide">Routes</a></li>
				<li><a class="stops"  data-transition="slide">My Stops</a></li>
				<li><a href="#page_map" data-transition="slide">Map</a></li>
				<li><a href="#info" data-transition="slide">Info</a></li>
			</ul>
			</div>
		</div>
    </div>
    
    <!-- New account registration Page -->
    <div data-role="page" class="page-map" id="page_register" data-add-back-btn="true" data-theme="b">
		<div data-role="header" data-id="nav1">
			<h1>Register</h1>
			<div class="header"></div>
		</div>

		<div data-role="content">
			<span id="register_user_input" class="invalid_entry"></span>
			<form id="registerForm" data-ajax="false" method="POST" action="register.jsp">
				<div data-role="fieldcontain">
					<label class="reg_label" for="username">Username:</label>
					<input type="text" name="username" id="username" required pattern="\w{6,16}" placeholder="please enter a username"/>
				</div>
				<div data-role="fieldcontain">
					<label class="reg_label" for="password">Password:</label>
					<input type="password" name="password" id="password" required pattern="^(?=.*\d)(?=.*[A-Z]).{8,16}$" placeholder="please enter a password"/>
				</div>
				<div data-role="fieldcontain">
					<label class="reg_label" for="firstName">First name:</label>
					<input type="text" name="firstName" id="firstName" required pattern="[a-z,A-Z]{1,64}" placeholder="please enter your first name"/> 
				</div>
				<div data-role="fieldcontain">
					<label class="reg_label" for="lastName">Last name:</label>
					<input type="text" name="lastName" id="lastName" required pattern="[a-z,A-Z]{1,64}" placeholder="please enter your last name"/> 
				</div>
				<div data-role="fieldcontain">
					<label class="reg_label" for="email">E-mail:</label>
					<input type="email" name="email" id="email" required placeholder="please enter your email address"/> 
				</div>
				<div data-role="fieldcontain">
					<label class="reg_label" for="phone">Phone</label>
					<input type="text" name="phone" id="phone" required placeholder="please enter your phone number" onKeyUp="mask(this.value,this,'1,5,9','-');"/> 
				</div>
				<input type="submit" id="submitButton" value="Submit!"/>
			</form>			
		</div>
		
		<div data-role="popup" id="regSuccessPopup" data-overlay-theme="a" data-theme="c" class="ui-corner-all">
			<div data-role="content" data-theme="b" class="ui-corner-bottom ui-content">
				<h2 class="ui-title">Registration successful!</h2>
				<p>You can now login with your username and password</p>
			</div>
		</div>		
		
		<div data-role="popup" id="regFailPopup" data-overlay-theme="a" data-theme="c" class="ui-corner-all">
			<div data-role="content" data-theme="b" class="ui-content">
				<h3 class="ui-title">Sorry, username has been taken already.</h3>
			</div>
		</div>

		<div data-role="footer" class="footerDiv" data-id="nav1" data-position="fixed" data-theme='e'>
			<div data-role="navbar">
			<ul>
				<li><a href="#routes" data-transition="slide">Routes</a></li>
				<li><a class="stops"  data-transition="slide">My Stops</a></li>
				<li><a href="#page_map" data-transition="slide">Map</a></li>
				<li><a href="#info" data-transition="slide">Info</a></li>
			</ul>
			</div>
		</div>
    </div>
    
     <!-- direction list page -->
    <div data-role="page" class="page-map" id="page_directions" data-add-back-btn="true" data-theme="b">

		<div data-role="header" data-id="nav1">
			<h1 id="dirPageHeader"></h1>
			<div class="header"></div>
		</div>

		<div data-role="content">
			<h2>Select a Direction to View Stops</h2>
			<ul id="dirList" data-inset="true" data-role="listview" data-filter="true" data-filter-theme='d'>
				<li></li>
			</ul>
		</div>		

		<div data-role="footer" class="footerDiv" data-id="nav1" data-position="fixed" data-theme='e'>
			<div data-role="navbar">
			<ul>
				<li><a href="#routes" data-transition="slide">Routes</a></li>
				<li><a class="stops"  data-transition="slide">My Stops</a></li>
				<li><a href="#page_map" data-transition="slide">Map</a></li>
				<li><a href="#info" data-transition="slide">Info</a></li>
			</ul>
			</div>
		</div>
    </div>
    
    <!-- stops list page -->
    <div data-role="page" class="page-map" id="page_stops" data-add-back-btn="true" data-theme="b">

		<div data-role="header" data-id="nav1">
			<h1 id="stopPageHeader"></h1>
			<div class="header"></div>
		</div>

		<div data-role="content">
			<ul id="stopList" data-role="listview" data-inset="true" data-filter="true" data-filter-theme='d'>
				<li>Loading...</li>
			</ul>
		</div>
		
		<div data-role="popup" id="saveStopPopup" data-overlay-theme="b" data-theme="c" class="ui-corner-all">
			<div data-role="content" data-theme="b" class="ui-content">
				<h3 class="ui-title">Stop saved!</h3>
			</div>
		</div>

		<div data-role="footer" class="footerDiv" data-id="nav1" data-position="fixed" data-theme='e'>
			<div data-role="navbar">
			<ul>
				<li><a href="#routes" data-transition="slide">Routes</a></li>
				<li><a class="stops" data-transition="slide">My Stops</a></li>
				<li><a href="#page_map" data-transition="slide">Map</a></li>
				<li><a href="#info" data-transition="slide">Info</a></li>
			</ul>
			</div>
		</div>
    </div>
    
    <!-- arrival prediction page -->
    <div data-role="page" class="page-map" id="page_predictions" data-add-back-btn="true" data-theme="b">

		<div data-role="header" data-id="nav1">
			<h1 id="predictPageHeader">Predictions</h1>
			<div class="header"></div>
		</div>

		<div data-role="content">
			<h2 id="clock"></h2>
			<h3>Next bus arriving at...<a href="#page_predictions" id="refresh_predictions" data-role="button" data-icon="refresh" data-iconpos="notext" data-inline="true">Refresh</a></h3>
			<ul id="predictList" data-role="listview" data-inset="true" data-filter="true" data-filter-theme='d'>
				<li>Loading...</li>
			</ul>
		</div>		

		<div data-role="footer" class="footerDiv" data-id="nav1" data-position="fixed" data-theme='e'>
			<div data-role="navbar">
			<ul>
				<li><a href="#routes" data-transition="slide">Routes</a></li>
				<li><a class="stops"  data-transition="slide">My Stops</a></li>
				<li><a href="#page_map" data-transition="slide">Map</a></li>
				<li><a href="#info" data-transition="slide">Info</a></li>
			</ul>
			</div>
		</div>
    </div>
  </body>
</html>
